<template>
  <div class="hello">
    <!-- 初始化echarts -->
    <div id="mapBox"></div>
  </div>
</template>

<script>
import echarts from "echarts"
import 'echarts/map/js/china'
import jsonp from "jsonp"
// 使用地图,需要先注册地图
const option = {
  title:{
    text:"疫情分布",
    textStyle:{
      color:'#A9334C'
    },
    link:"https://www.baidu.com",
    subtext:"中国加油",
    sublink:"https://www.baidu.com"
  },
  series:[{
    name:'确诊人数',
    type:'map', // 渲染的类型为map
    map:'china', // 渲染的是中国地图
    label:{
      show:true,  //开启省份的名字
      color:'black', // 省份的字体颜色
      fontSize:12, // 省份的字体大小
    },
    // 控制板块的颜色和边框
    itemStyle:{
       areaColor:'#fff',
       borderColor:'#E3E6EB'
    },
    roam:true,
    zoom:1.1, // 控制地图的放大和缩小   
    // 控制鼠标滑过之后的背景和颜色字体
    emphasis:{
      label:{
        color:'#black',
        fontSize:14,
      },
      itemStyle:{
        areaColor:'#C7FFFD'
      }
    },
    data:[]  //用来展示后台返回的数据 
  }],
  //统计
  visualMap:[{
      type:'piecewise',  //类型
      show:true , // 是否显示
      pieces: 
      // 分段
      [{gt: 10000},
      {gt: 1000, lte: 9999},  
      {gt: 100, lte: 999},  
      {gt: 10, lte: 99},  
      {gt: 1, lte: 9,},       
      {lt: 0}]
    }],
    tooltip:[{
      show:true,
      trigger:'item'
    }],
     toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
}  

export default {
  name: 'HelloWorld',
  // 基于准备好的DOM,初始化echarts实例
  mounted(){
    this. myChearts = echarts.init(document.getElementById('mapBox'))
    this.myChearts.setOption(option)
    this.getData();
  },
  methods:{
    getData(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',{},(err,data)=>{
        if(!err){
          // console.log(data)
          // 遍历出所需要的数据 
          let list = data.data.list.map(item=>({ name:item.name,value:item.value}))
          // 把数据赋值给data
          option.series[0].data = list
          this.myChearts.setOption(option)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mapBox{
  width: 900px;
  height: 600px;
  /* background: red; */
  margin: auto;
  background: #F8F9FA;
}
</style>
